<!DOCTYPE html>
<html>

<head>
  <title>Leaflet.PolylineDecorator</title>
  <meta charset="utf-8" />
  <!-- 引入leafletapi -->
  <link rel="stylesheet" href="http://gisarmory.xyz/blog/lib/leaflet/leaflet.css" />
  <script src="http://gisarmory.xyz/blog/lib/leaflet/leaflet.js"></script>

  <script src="../src/AnimatedMarker.js"></script>
<!--  <script src="../src/data1.json"></script>-->

  <style>
    body {
      margin: 0;
    }

    .map {
      position: absolute;
      height: 100%;
      right: 0;
      left: 0;
    }

    .menuBar {
      position: relative;
      text-align: center;
      top: 10px;
      margin: 0 50px;
      padding: 5px;
      border-radius: 3px;
      z-index: 999;
      color: #ffffff;
      background-color: rgba(0, 168, 0, 1);
    }
  </style>
</head>

<body>
  <div class="map" id="map"></div>
  <div class="menuBar">
    <input type="button" value="开始" onclick="startClick()" />
    <input type="button" value="暂停" onclick="pauseClick()" />
    <input type="button" value="加速" onclick="speetUp()" />
    <input type="button" value="减速" onclick="speetDown()" />
    <input type="button" value="停止" onclick="stopClick()" />
  </div>
</body>

<script type="module">
  import {latlngs2,latlngs1,latlngs4,latlngs3} from './data.js'

  // var latlngs=[latlngs1,latlngs2,latlngs3,latlngs4]
  var latlngs=[latlngs2,latlngs1,latlngs3,latlngs4]
  console.log('%c  latlngs: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;',  latlngs);
  // 初始化地图
  var map = L.map('map', {
    // center: [39.924317, 116.390619],
    center:[25.1834, 111.6172],
    zoom: 10,
    preferCanvas: true // 使用canvas模式渲染矢量图形 
  });
  // 添加底图
  var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

  var animatedMarkerARR=[];
  // TODO:开始
  window.startClick= function () {
    // animatedMarker.start();
    for (let i = 0; i < latlngs.length; i++) {
      addAnimatedMarker(latlngs[i],map,10)
    }
    console.log('%c  animatedMarkerARR: ','color: MidnightBlue; background: Aquamarine; font-size: 20px;',  animatedMarkerARR);
    debugger;
    for (let i = 0; i < animatedMarkerARR.length; i++) {
      animatedMarkerARR[i].start();
    }
    map.invalidateSize(true);
  }

  /**
   * animatedMarker 添加动画
   * @param latlngs 坐标二维数组【维度在前，经度在后】
   * @param map 地图
   */
  window.addAnimatedMarker=function (latlngs, map, riverWidth) {

    // //bz:备注 轨迹线
    let routeLine = L.polyline(latlngs, {
      weight: riverWidth
    }).addTo(map);
    // bz:icon
    let carIcon = L.icon({
      // iconSize: [37, 26],
      iconSize: [55, 55],
      iconAnchor: [19, 13],
      // iconUrl: "./images/circleRedCenter.png"
      iconUrl: './circleRedCenter.png'
      // iconUrl: './car.png'
    })
    // bz:声明速度列表
    let speedList = new Array();
    for (let i = 0; i < latlngs.length; i++) {
      speedList[i]=10;
    }
    // debugger
    // let animatedMarker = LanimatedMarker(latlngs, {
    let animatedMarker = L.animatedMarker(routeLine.getLatLngs(), {
      speedList: speedList,
      interval: 200, // 默认为100mm
      icon: carIcon,
      // playCall: updateRealLine
    }).addTo(map)
    // bz:开始运行
    // animatedMarker.start();
    animatedMarkerARR.push(animatedMarker)
  }











  let speetX = 1 // 默认速度倍数
  // 加速
  window.speetUp=function () {
    speetX = speetX * 2
    // animatedMarker.setSpeetX(speetX);
  }
  // document.getElementById("bt_start").onclick=speetUp;
  // 减速
  function speetDown() {
    speetX = speetX / 2
    // animatedMarker.setSpeetX(speetX);
  }


  // document.getElementById("bt_start").onclick=startClick;/
  // 暂停
  function pauseClick() {
    // animatedMarker.pause();
  }

  // 停止
  function stopClick() {
    // newLatlngs = []
    // animatedMarker.stop();
  }


</script>

</html>